<!DOCTYPE>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>部门领导审批</title>
    <link rel="stylesheet" href="/static/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="/static/plugin/layer/skin/layer.css">
    <link rel="stylesheet" type="text/css" href="/static/css/dj-css.css">
    <link rel="stylesheet" type="text/css" href="../../../page/common/css/oa_system.css">

</head>
<body>
<div id="createApp">

    <h2>调整申请</h2>
    <div class="main">
        <h3>请假申请</h3>
        <table class="" border="0" cellspacing="0" cellpadding="0">
            <thead>
            <tr>
                <th>申请人</th>
                <th>类型</th>
                <th>请假开始时间</th>
                <th>请假结束时间</th>
                <th>请假原因</th>
                <th>任务ID</th>
                <th>任务名称</th>
                <th>流程实例ID</th>
                <th>流程创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="task in depttasklist">
                <td v-text="task.user_id"></td>
                <td v-text="task.leave_type"></td>
                <td v-text="task.start_time"></td>
                <td v-text="task.end_time"></td>
                <td v-text="task.reason"></td>
                <td v-text="task.taskid"></td>
                <td v-text="task.taskname"></td>
                <td v-text="task.process_instance_id"></td>
                <td>{{task.taskcreatetime}}</td>
                <td class="operate">
                    <button @click="dealTask(task.taskid)">处理</button>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="layui-form-item clearfix footer">
            <div class="fl rowsPerPage ">
                每页显示 <input type="number" v-model="pageChange.rowCount">条，共 <span>{{pageChange.total}}</span>条
            </div>
            <div class="fl turnPage ">
                <span class="firstPage" @click="pageUpOrDown(1)">首页</span>
                <span class="prePage" @click="pageUpOrDown('prev')">上一页</span>
                <span class="selectPage"><input type="text" v-model="pageChange.current" value="1">/ <b>{{pageChange.pageNumber}}</b> </span>
                <span class="nextPage" @click="pageUpOrDown('next')">下一页</span>
                <span class="lastPage" @click="pageUpOrDown(pageChange.pageNumber)">末页</span>
                <span class="goPage" @click="init">确认</span>
            </div>
        </div>
    </div>
    <div class="mask" v-show="dealResultShowFlag" >
    <div  class="dealResult">
        <h6>
            调整申请
            <i @click="dealResultShowFlag = !dealResultShowFlag">×</i>
        </h6>
        <form class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">申请人：</label>
                <div class="layui-input-inline">
                    <input type="text" readonly v-model="dealResult.user_id" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">申请时间：</label>
                <div class="layui-input-inline">
                    <input type="text" readonly v-model="dealResult.apply_time" class="layui-input">
                </div>
            </div>
            <div class="layui-form-pane">
                <div class="layui-form-item">
                    <label class="layui-form-label">开始时间：</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="开始时间" id="LAY_demorange_s">
                        <i class="layui-icon">&#xe637;</i>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">实际结束时间：</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" placeholder="结束时间" id="LAY_demorange_e">
                        <i class="layui-icon">&#xe637;</i>
                    </div>
                </div>
            </div>
            <div class="layui-form-item fl">
                <div class="dj-select dj-select-inline boxStyle">
                    <label  style="height:auto;padding:3px 15px;width:110px;">请假类型：</label>
                    <div class="dj-select-content">
                        <div class="dj-select-input" flag='true'>
                            <span class="dj-selected readOnly" type="text" name="" selectedCode=''
                                  style="height:40px;line-height:40px;" id="leave_type">请选择请假类型</span>
                            <i></i>
                        </div>
                        <ul class="dj-select-list">
                            <li code=0>事假</li>
                            <li code=1>病假</li>
                            <li code=2>婚假</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">请假原因：</label>
                <div class="layui-input-inline">
                    <input type="text"  v-model="dealResult.reason" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="dj-select dj-select-inline boxStyle">
                    <label style="height:auto;padding:3px 15px;width:110px;">继续申请</label>
                    <div class="dj-select-content" style="width: 196px;">
                        <div class="dj-select-input" flag='true' style="width: 190px;">
                            <span class="dj-selected readOnly" type="text" name="" selectedCode='true' style="height:40px;line-height:40px;width: 190px;" id="reapply">重新申请</span>
                            <i></i>
                        </div>
                        <ul class="dj-select-list" style="width: 190px;">
                            <li code = true >重新申请</li>
                            <li code = false >不再申请</li>
                        </ul>
                    </div>
                </div>
            </div>
        </form>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <button class="layui-btn" @click="done(dealResult.taskid)">完成</button>
        </div>
    </div>
    </div>
</div>
<script src="/static/lib/jquery.min.js"></script>
<script src="/static/lib/layui/layui.js" charset="utf-8"></script>
<script src="/static/lib/vue.min.js"></script>
<script src="/static/lib/x-layui.js"></script>
<script src="/static/lib/dj-js.js"></script>
<script type="text/javascript">

    var VM = new Vue({
        el: "#createApp",
        created: function () {
            this.init();
        },
        data: {
            parameter: {},
            pageChange: {
                current: 1,//当前页
                rowCount: 5,//每页5行
                total:"",
                pageNumber:""
            },
            depttasklist: [],
            taskId:"",
            dealResultShowFlag: false,
            dealResult: {}
        },
        methods: {
            lay: function () {
                layui.use(['layer', "form", 'laydate'], function () {
                    var form = layui.form(),
                            layer = layui.layer,
                            laydate = layui.laydate;
                });
            },
            init: function () {
                var _this = this;
                $.ajax({
                    type: "post",
                    url: "../../activiti/updatetasklist.do",
                    data: _this.pageChange,
                    dataType: "json",
                    success: function (data) {
                        var data = JSON.parse(data);
                        console.log(data);
                        if (data) {
                            _this.depttasklist = data.rows;
                            _this.pageChange.total = data.total;
                            _this.pageChange.pageNumber = Math.ceil(_this.pageChange.total/_this.pageChange.rowCount);
                        }

                    }
                });
            },
            pageUpOrDown:function(type){
                if(isNaN(type)){
                    if(type == "prev"){
                        if(this.pageChange.current > 1){
                            this.pageChange.current--;
                        }
                    }
                    if(type == "next"){
                        if(this.pageChange.current < this.pageChange.pageNumber){
                            this.pageChange.current++;
                        }
                    }
                }else{
                    this.pageChange.current = type;
                }
            },
            verify: function (item) {
                if (item == "") {
                    layer.msg("必填项不能为空！", {icon: 5});
                    return false;
                }
            },
            sub: function () {
                var _this = this;
                this.parameter.leave_type = $("#leave_type").html();
                this.parameter.start_time = $("#LAY_demorange_s").val();
                this.parameter.end_time = $("#LAY_demorange_e").val();
                this.parameter.reason = $("#reason").val();
                $.ajax({
                    type: "post",
                    url: "../../activiti/startleave.do",
                    data: _this.parameter,
                    dataType: "json",
                    success: function (data) {
                        layer.msg("提交成功！", {icon: 1});
//                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
//                        parent.layer.close(index);
//                        parent.window.location.reload();
//                        window.location.href = "javascript:location.replace(location.href)";
                    }
                });
            },
            dealTask: function (taskId) {
                var _this = this;
                this.taskId = taskId;
                this.dealResultShowFlag = true;
                $.ajax({
                    type: "post",
                    url: "../../activiti/dealtask.do",
                    data: {"taskid": taskId},
                    dataType: "json",
                    success: function (data) {
                        if (data.code === 200) {
                            _this.dealResult = data.result.leave;

                            $("#leave_type").html(_this.dealResult.leave_type);
                            if(_this.dealResult.leave_type == "事假"){
                                $("#leave_type").attr("selectedCode",0);
                            }else if(_this.dealResult.leave_type == "病假"){
                                $("#leave_type").attr("selectedCode",1);
                            }else{
                                $("#leave_type").attr("selectedCode",2);
                            }


                            layui.use('laydate', function () {
                                var laydate = layui.laydate;
                                $("#LAY_demorange_s").val(_this.dealResult.start_time);
                                $("#LAY_demorange_e").val(_this.dealResult.end_time);
                                var start = {
                                    max: '2099-06-16 23:59:59'
                                    , istoday: false
                                    , choose: function (datas) {
                                        end.min = datas; //开始日选好后，重置结束日的最小日期
                                        end.start = datas;//将结束日的初始值设定为开始日
                                    }
                                };

                                var end = {
                                    max: '2099-06-16 23:59:59'
                                    , istoday: false
                                    , choose: function (datas) {
                                        start.max = datas; //结束日选好后，重置开始日的最大日期
                                    }
                                };

                                document.getElementById('LAY_demorange_s').onclick = function () {
                                    start.elem = this;
                                    laydate(start);
                                };
                                document.getElementById('LAY_demorange_e').onclick = function () {
                                    end.elem = this;
                                    laydate(end);
                                }

                            });
                        }
                    }
                });
            },
            done:function(){
                var _this = this;
                layui.use(['layer', "form", 'laydate'], function () {
                    var layer = layui.layer;
                });
                var reapply = $("#reapply").attr("selectedCode");
                var startTime = $("#LAY_demorange_s").val();
                var endTime = $("#LAY_demorange_e").val();
                var leaveType = $("#leave_type").val();
                var reason = this.dealResult.reason;
                $.ajax({
                    type: "post",
                    url: "../../activiti/task/updatecomplete.do",
                    data:{"reapply":reapply,"taskid":_this.taskId,"start_time":startTime,"end_time":endTime,"leave_type":leaveType,"reason":reason},
                    dataType: "json",
                    success: function (data) {
                        if (data) {
                            layer.msg("操作成功！", {icon: 1});
                            setTimeout(function () {
                                _this.dealResultShowFlag = false;
                                window.location.reload();
                            },100);

                        }

                    }
                });
            },
            reset: function () {
                $("#leave_type").html("请选择请假类型");
                $("#leave_type").attr("selectedCode", "");
                $(".dj-select-list li").removeClass("selected");
                $("#LAY_demorange_s").val("");
                $("#LAY_demorange_e").val("");
                $("#reason").val("");
            }
        }
    });//vue 实例结束


</script>
</body>
</html>